<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />

    <div style="margin-top: 11px">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">包材出库明细</span>
        </div>
        <Table
          :tableData="tableData2"
          :tableHeader="tableHeader"
          :TableHeight="100"
          :outTableHeight="140"
          :summaryData="summaryData"
          summary
          @currentRow="clicktogetdata"
          :isLoading="isLoading"
        />
        <div class="mt24 f12">
          <div>
            <span class="mr10">材料名称</span
            ><el-input class="mr55" v-model="materialNameVal" placeholder="" size="small" clearable @change="" style="width: 331px"></el-input>
          </div>
        </div>
        <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterialOutbound'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { PackingMaterialsOutOfStorage, FindDate } from '@/api/GeneralManager/Factoryinquiry/PackagingMaterialOutbound'
import type { PackingMaterialsOutOfStorageInterface, PackingMaterialsOutOf } from '@/api/GeneralManager/Factoryinquiry/PackagingMaterialOutbound'
// 底部表格数据
const tableData2 = ref<PackingMaterialsOutOf[]>()

const isLoading = ref(true)

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入出库单号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '出库原因'
  },
  {
    type: 'date',
    dateLabel: '出库日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '部门'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const clicktogetdata = (row: any) => {
  const { mtlName } = row || {}
  materialNameVal.value = mtlName
}

interface summaryDataType {
  index: number
  num: number | undefined
}

// 计算金额总数
const summaryData = ref<summaryDataType[]>([
  {
    index: 10,
    num: 0
  }
])

const PackingMaterialsOutOfStorageT = ref<PackingMaterialsOutOfStorageInterface>({
  deptName: '',
  lotNo: '',
  mtlName: '',
  mtlNo: '',
  outStorageEndDate: '',
  outStorageStartDate: '',
  pageNum: 1,
  pageSize: 40,
  slipNo: '',
  slipReason: ''
})

// 获取数据
const PackingMaterialsInStorageDateTable = async () => {
  isLoading.value = true
  const result = await PackingMaterialsOutOfStorage(PackingMaterialsOutOfStorageT.value)
  tableData2.value = result.list
  total.value = result.total
  summaryData.value[0].num = result.qtySum
  const { mtlName } = result.list[0] || {}
  materialNameVal.value = mtlName
  isLoading.value = false
}

const GetDepartmentData = async () => {
  const result = await FindDate()
  let newArray = <any>[]
  result.dept.forEach((item: { DEPT_NAME: string; DEPT_NO: string }) => {
    newArray.push(item.DEPT_NAME + ' ' + item.DEPT_NO)
  })
  formList.value[3].selectOptions = EvaluatesTheArrayReturnValue(newArray)
  formList.value[1].selectOptions = EvaluatesTheArrayReturnValue(result.slipReason)
  console.log(result)
}

// 统一调用接口
const interAceFunct = () => {
  // 包材入库选择指令函数
  PackingMaterialsInStorageDateTable()

  // Find下拉框数据
  GetDepartmentData()
}

onMounted(() => {
  interAceFunct()
})

const tableHeader = ref([
  {
    label: '出库单号',
    prop: 'slipNo'
  },
  {
    label: '出库日期',
    prop: 'slipDate'
  },
  {
    label: '出库原因',
    prop: 'slipReason'
  },
  {
    label: '部门名称',
    prop: 'deptName'
  },
  {
    label: '物料编号',
    prop: 'mtlNo'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '单价',
    prop: 'price'
  },
  {
    label: '金额',
    prop: 'amt'
  },
  {
    label: '仓管员',
    prop: 'chiName'
  }
])

const materialNameVal = ref('')

// 分页器
const total = ref()

const handleSizeChange = (val: number) => {
  isLoading.value = true
  PackingMaterialsOutOfStorageT.value.pageNum = val
  PackingMaterialsInStorageDateTable()
}

const handleCurrentChange = (val: number) => {
  isLoading.value = true
  PackingMaterialsOutOfStorageT.value.pageSize = val
  PackingMaterialsInStorageDateTable()
}

const Launchform = (val: any) => {
  PackingMaterialsOutOfStorageT.value.slipNo = val[0].inputValue
  PackingMaterialsOutOfStorageT.value.slipReason = val[1].selectValue
  PackingMaterialsOutOfStorageT.value.outStorageStartDate = val[2].dateValue[0]
  PackingMaterialsOutOfStorageT.value.outStorageEndDate = val[2].dateValue[1]
  PackingMaterialsOutOfStorageT.value.deptName = val[3].selectValue.split(' ')[0]?.trim()
  PackingMaterialsOutOfStorageT.value.lotNo = val[4].inputValue
  PackingMaterialsOutOfStorageT.value.mtlNo = val[5].inputValue
  PackingMaterialsOutOfStorageT.value.mtlName = val[6].inputValue
  PackingMaterialsInStorageDateTable()
}

const findClicked = async (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '导出') {
    const res = await fileRequest.post<any, any>(`/pack/downloadPackOut`, PackingMaterialsOutOfStorageT.value)
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `包材出库查询导出${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}
</script>

<style lang="less" scoped></style>
